<template>
  <div class="continer">
    <!-- 用户userinfo -->
    <user-info></user-info>
    <!-- end -->
    <div class="listBox">
      <!-- 用户认证 -->
      <div class="left">
        <img class="logImg" src="@/assets/images/m1.jpg" alt="">
        <span>用户认证</span>
      </div>
      <span class="right">未认证</span>
    </div>
    <!-- 扫一扫 -->
    <div class="listBox">
      <div class="left">
        <img class="logImg" src="@/assets/images/m2.jpg" alt="">
        <span>扫一扫</span>
      </div>
    </div>
    <!-- 我的优惠 -->
    <router-link class="listBox" tag="div" :to="{name:'myDiscount',query:{test:666}}">
      <div class="left">
        <img class="logImg" src="@/assets/images/m3.jpg" alt="">
        <span class="redDot">我的优惠</span>
      </div>
    </router-link>
    <!-- 我的收藏 -->
    <router-link class="listBox" tag="div" :to="{name:'myCollect',query:{test:666}}">
      <div class="left">
        <img class="logImg" src="@/assets/images/m4.jpg" alt="">
        <span>我的收藏</span>
      </div>
    </router-link>
    <!-- 联系客服 -->
    <!-- <router-link class="listBox" tag="div" :to="'tel:'+400-6600-256"> -->
      <a class="listBox" :href="'tel:'+4006600256">
        <div class="left">
          <img class="logImg" src="@/assets/images/m5.jpg" alt="">
          <span>联系客服</span>
        </div>
        <div class="right">400-6600-256</div>
      </a>
    <!-- </router-link> -->
    <!-- 我的建议 -->
    <div class="listBox">
      <div class="left">
        <img class="logImg" src="@/assets/images/m6.jpg" alt="">
        <span>我的建议</span>
      </div>
    </div>
    
    <tabbar></tabbar>
  </div>
</template>

<script>
import Tabbar from '../home/components/Tabbar'
import UserInfo from '@/pages/mine/components/UserInfo'

export default {
  name: 'Mine',
  components:{
    Tabbar,UserInfo
  },
  created(){
    console.log(this.$store.state.code)
  },
  mounted() {
    console.log("666")
  },
}
</script>

<style lang="stylus" scoped>
.continer
  width 100%
  display flex
  align-items center
  flex-direction column
  // .topBox
  //   width 100%
  //   height 313px
  //   background url(../../assets/images/minebg.jpg)
  //   background-size 100% 100%
  //   display flex
  //   align-items center
  //   .headBox
  //     width 198px
  //     height 198px
  //     box-sizing border-box
  //     border-radius 50%
  //     position relative
  //     margin-right 50px
  //     margin-left 70px
  //     margin-top 20px
  //     .head 
  //       width 180px
  //       height 180px
  //       border-radius 50%
  //       border 9px solid #625f61
  //     .sex
  //       width 50px
  //       height 50px
  //       border-radius 50%
  //       position absolute
  //       bottom 20px
  //       right 10px
  //   .right
  //     display flex
  //     flex-direction column
  //     justify-content center
  //     height 313px
  //     color #ffffff
  //     .nameTxt
  //       line-height 36px
  //       font-size 36px
  //       font-weight bold
  //       margin-bottom 20px
  //     .vipTxt
  //       line-height 22px
  //       font-size 22px
  //       color #cd0021
  //       margin-bottom 20px
  //     .locBox
  //       display flex
  //       align-items center
  //       font-size 22px
  //       color #ffffff
  //       .locImg
  //         width 26px
  //         height 32px
  //         margin 0 6px 0 0
  .listBox
    width 700px
    height 100px
    box-sizing border-box
    display flex
    align-items center
    padding 0 40px
    border-bottom 1px solid #f3f3f3;/*no*/
    justify-content space-between
    .left
      display flex
      align-items center
      font-size 28px
      color #333333
      height 40px
      letter-spacing 2px
      .logImg
        width 40px
        height 40px
        margin-right 28px
      span 
        position relative
      .redDot::after
        content " "
        width 14px
        height 14px
        border-radius 50%
        background red
        position absolute
        right -20px
        top -20px

    .right
      line-height 24px
      color #666666


</style>